<template>
	<view class='showcase_box' style="display: flex;flex-direction: column;">
		<view class="search_top across">
			<view class="left">
				<image class='back' @click="navBack" src='@/static/zuo.png'></image>
				<!-- <image src="@/static/shopCart.png" mode="" style="width: 34upx;height: 32upx;" @click="tocheche"></image> -->
				<view class="search_top_center across">
					<image src='@/static/huisou.png'></image>
					<input type="text" placeholder="搜索商城内商品" v-model="sousuo" confirm-type="search"
						@confirm="doSearch" />
				</view>
				<view class="search_btn" @click="isShows=!isShows">
					<image src="@/static/gengduo.png" mode="" style="width: 45upx;height: 12upx;"></image>
				</view>
			</view>
		</view>
		<view style="width: 220upx;height: 260upx;background-color: #fff;box-shadow: 0upx 5upx 16upx 0px rgba(1,1,1,0.1500);position: absolute;right: 12px;top: 40px;z-index: 666;border-radius: 10upx;display: flex;flex-direction: column;z-index: 99999;" v-if="isShows">
			<view style="width: 100%;height: 127upx;display: flex;align-items: center;padding: 0 30upx;" @click="toorder">
				<image src="@/static/dingdans.png" mode="" style="width: 26upx;height: 30upx;"></image>
				<text style="padding-left: 20upx;">我的订单</text>
			</view>
			<view style="width: 100%;height: 127upx;display: flex;align-items: center;padding: 0 30upx;" @click="tocheche">
				<image src="@/static/cheche.png" mode="" style="width: 34upx;height: 32upx;"></image>
				<text style="padding-left: 20upx;">购物车</text>
			</view>
		</view>
		<view class="center_box" style="margin-top: 110upx;" @click.stop.prevent="isShows=false">
			<view class="paixu">
				<video-header @setTitle='setTitle' :isBoolean='isBoolean' :actIndex='actIndex' @setIndex='setIndex' v-if="isflase">
					
				</video-header>
			</view>
			<!-- <view class="center_top across">
				<view class="label">全部商品</view>
				<view class="across label_title" @click="openSelect">
					<view class="text">{{items[current].name}}</view>
					<view class="triangle"></view>
				</view>
				<view class="label_box" v-if="isShow">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd across" v-for="(item, index) in items"
							:key="item.value">
							<view>
								<radio color='#FF3D3D' :value="item.value" :checked="item.value == sort" />
							</view>
							<view class='name'>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view> -->
			<view class="content" style="margin-top: 60upx;">
				<waterfallsFlow ref="waterfallsFlow" @wapper-lick='getnav' :list="list" imageSrcKey='thumb_url' v-if="list.length>0">
					<!--  #ifdef  MP-WEIXIN -->
					<view v-for="(item, index) of list" :key="index" slot="slot{{index}}" >
						<view class="cnt">
							<view class="title">{{item.goods_name}}</view>
							<view class="across ti">
								<view class="price">{{item.zs_price}}</view>
								<view class="xiao">已售{{item.soldnum}}</view>
							</view>
						</view>
					</view>
					<!--  #endif -->

					<!-- #ifndef  MP-WEIXIN -->
					<!-- app、h5 自定义内容 -->
					<template v-slot:default="item">
						<view class="cnt">
							<view class="title">{{item.goods_name}}</view>
							<view class="across ti">
								<view class="price">{{item.zs_price}}</view>
								<view class="xiao">已售{{item.soldnum}}</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</waterfallsFlow>
				<view v-if="issou" style="padding-top: 240upx;display: flex;justify-content: center;align-items: center;padding-bottom: 100upx;">
					<image src="@/static/pinsou.png" mode="" style="width: 60upx;height: 60upx;"></image>
					<text style="font-size: 30upx;color: #999;padding-left: 30upx;">未找到相关商品</text>
				</view>
				<view v-if="isping" style="padding-top: 240upx;display: flex;justify-content: center;align-items: center;padding-bottom: 100upx;">
					<image src="@/static/wuping.png" mode="" style="width: 240upx;height: 240upx;"></image>
				</view>
			</view>
			<uniLoadMore :loadingType='loadingType'></uniLoadMore>
		</view>
		<uni-popup ref="more" type="bottom">
			<view class="dingdan">
				<view style="display: flex;align-items: center;justify-content: flex-end;width: 100%;padding-top: 30upx;">
					<text style="color: #000000;font-size: 24upx;margin-right: 270upx;">我的订单</text>
					<image src="../../static/closed.png" mode=""
						style="width: 30upx;height: 30upx;margin-right: 30upx;" @click="closedw()"></image>
				</view>
				<view style="display: flex;justify-content: space-around;padding-top: 50upx;">
					<view class="danlist" @click="toorder(0)">
						<image src="@/static/quanbu.png" mode="" style="width: 34upx;height: 34upx;"></image>
						<text style="color: #333333;font-size: 24upx;padding-top: 20upx;">全部</text>
					</view>
					<view class="danlist" @click="toorder(1)">
						<image src="@/static/daifu.png" mode="" style="width: 34upx;height: 34upx;"></image>
						<text style="color: #333333;font-size: 24upx;padding-top: 20upx;">待支付</text>
					</view>
					<view class="danlist" @click="toorder(2)">
						<image src="@/static/daifa.png" mode="" style="width: 34upx;height: 34upx;"></image>
						<text style="color: #333333;font-size: 24upx;padding-top: 20upx;">待发货</text>
					</view>
					<view class="danlist" @click="toorder(3)">
						<image src="@/static/daishou.png" mode="" style="width: 34upx;height: 34upx;"></image>
						<text style="color: #333333;font-size: 24upx;padding-top: 20upx;">待收货</text>
					</view>
					<view class="danlist" @click="toorder(4)">
						<image src="@/static/daiping.png" mode="" style="width: 34upx;height: 34upx;"></image>
						<text style="color: #333333;font-size: 24upx;padding-top: 20upx;">待评价</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import videoHeader from "@/components/video/headerw.vue"
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import uniLoadMore from "@/components/uni-load-more.vue"
	let page = 1,
		timer = null
	export default {
		name: 'showcase',
		data() {
			return {
				list: [],
				sousuo: '',
				tabIndex: 0,
				isgao: true,
				isBoolean: 1,
				actIndex: 0,
				isping:false,
				isShows: false,
				issou:false,
				items: [{
						value: 'zonghe',
						name: '综合排序'
					},
					{
						value: 'new',
						name: '新品排序',
					},
					{
						value: 'deal_num',
						name: '销量从高到低'
					},
					{
						value: 'low_height',
						name: '价格从低到高'
					},
					{
						value: 'height_low',
						name: '价格从高到低'
					}
				],

				current: 0,
				isShow: false,
				page: 1,
				isflase:true,
				shopid: '',
				shop_id: '',
				name: '',
				info: {},
				cateId:'',
				usefo: {},
				tou: '',
				nums: '',
				loadingType: 0,
				loadText: '加载更多',
				sort: 'zonghe',
				beforeSort: 'zonghe'
			}
		},
		components: {
			waterfallsFlow,
			uniLoadMore,
			videoHeader
		},
		mounted() {

			// this.initData()
		},
		onReachBottom() {

			//阻止重复加载
			if (timer !== null) {
				console.log('清空')
				clearTimeout(timer)
				return
			}
			this.loadingType = 1
			// this.$refs.waterfallsFlow.refresh();
			timer = setTimeout(() => this.initData(this.shop_id, this.sort, this.page), 500)
			// this.getMoreNews()
		},
		onLoad(options) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					console.log(value, "valsdadasd")
					this.usefo = JSON.parse(value)
					// var userinfo = this.usefo
				} else {}
			} catch (e) {
				// error
			}
			// uni.showLoading({
			// 	title: '加载中'
			// })
			this.initData(options.id, 'zonghe', 1)
			// uni.setNavigationBarTitle({
			// 	title: options.name + '的橱窗'
			// })
		},
		methods: {
			closedw() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.more.close()
			},
			opened() {
				this.$refs.more.open()
			},
			setIndex(e) {
				console.log(e, "头部触发1111")
				this.issou = false
				this.actIndex = e.index
				this.isBoolean = 0
				this.cateId = e.id
				var cate_id = e.id
				this.$http.shopping({
					cate_id,
					page
				}).then(res => {
					console.log(res)
				
					if(res.data.goodres.length==0){
						this.list = []
						this.isping = true
					}else{
						this.list = res.data.goodres
						this.isping = false
					}
					// if (res.data.goodres.length > 0) {
					// 	this.name = res.data.shop_name
					// }
					// this.nums = res.data.sell_total_num
					this.page = ++this.page
					console.log(this.list)
					uni.stopPullDownRefresh()
					timer = null
					this.loadingType = 0
					// this.$refs.waterfallsFlow.refresh();
				}).catch(err => {
					uni.hideLoading()
				})
			},
			setTitle(index) {
				this.issou = false
				console.log(index, "头部触发22222")
				this.isBoolean = index
				this.actIndex = -1
				this.cateId = 0
			},
			doSearch() {
				console.log(1111)
				var page = 1
				var keyword = this.sousuo
				var cate_id = this.cateId
				this.$http.shopping({
					cate_id:'all',
					keyword,
					page
				}).then(res => {
					console.log(res)
				
					if(res.data.goodres.length==0){
						this.list = []
						this.issou = true
					}else{
						this.list = res.data.goodres
						this.issou = false
					}
					// if (res.data.goodres.length > 0) {
					// 	this.name = res.data.shop_name
					// }
					// this.nums = res.data.sell_total_num
					this.page = ++this.page
					timer = null
					this.loadingType = 0
					// this.$refs.waterfallsFlow.refresh();
				}).catch(err => {
					uni.hideLoading()
				})
			},
			tocheche() {
				uni.navigateTo({
					url: '/pages/tabBar/carted'
				})
			},
			toorder(index) {
				if (JSON.stringify(this.usefo) !== '{}') {
					uni.navigateTo({
						url: `/pagesC/homeSon/allOrder?index=${0}`
					})
					this.isShows = false
				} else {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
				}

			},
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getnav(item) {
				uni.navigateTo({
					url: `/pagesC/homeSon/goodsDetails?id=${item.id}&useid=${item.shop_id}`
				})
			},
			initData(shop_id, sort, page) {
				var cate_id = 'all'
				this.$http.shopping({
					cate_id,
					page
				}).then(res => {
					console.log(res)

					this.list = this.list.concat(res.data.goodres)
					// if (res.data.goodres.length > 0) {
					// 	this.name = res.data.shop_name
					// }
					// this.nums = res.data.sell_total_num
					this.page = ++this.page
					console.log(this.list)
					uni.stopPullDownRefresh()
					timer = null
					this.loadingType = 0
					// this.$refs.waterfallsFlow.refresh();
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// openSelect() {
			// 	this.isShow = !this.isShow
			// 	console.log(this.beforeSort + '   ' + this.sort)
			// 	if (!this.isShow && this.beforeSort !== this.sort) {
			// 		uni.showLoading({
			// 			title: '加载中'
			// 		})
			// 		this.$refs.waterfallsFlow.refresh();
			// 		this.list = []
			// 		this.initData(this.shop_id, this.sort, 1)
			// 	}
			// },
			radioChange(e) {
				console.log(e)
				this.beforeSort = this.sort
				this.sort = e.detail.value
				this.current = this.items.findIndex(item => {
					return item.value == this.sort
				})
			}
		}
	}
</script>

<style lang="less">
	.dingdan{
		width: 100%;
		height: 300upx;
		background-color: #fff;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		padding-bottom: 30upx;
	}
	.danlist{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.act_text {
		position: relative;
		color: #333333;
		font-size: 30upx;

		&::after {
			content: '';
			position: absolute;
			width: 65%;
			height: 6rpx;
			background-color: #333;
			border-radius: 2rpx;
			left: 14%;
			bottom: -4rpx;
		}
	}

	.text {
		font-size: 30upx;
		color: #999999;
	}

	.paixu {
		display: flex;
		justify-content: space-around;

		padding-top: 30upx;
	}

	.follow {
		width: 140rpx;
		height: 60rpx;
		background-color: #ff3d3d;
		border-radius: 10rpx;
		text-align: center;
		line-height: 60rpx;
		font-weight: 550;
		font-size: 30upx;
		color: #fff;
	}

	.followr {
		width: 140rpx;
		height: 60rpx;
		color: #fff;
	}

	.search_top {
		width: 100%;
		// margin-top: 20rpx;
		z-index: 9;
		align-items: center;
		// width: 65vw;
		justify-content: space-between;
		align-items: center;
		height: 94rpx;
		padding: 0rpx 4vw;
		position: fixed;
		// opacity: 0.8;
		background: #f4f4f4;

		.left {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 92vw;
			padding-top: 14upx;
		}

		.back {
			width: 46rpx;
			height: 46rpx;
			// margin-left: 10rpx;
		}

		.search_top_center {
			width: 520rpx;
			height: 60rpx;
			opacity: 0.5;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
			border-radius: 10rpx;

			.back_box {
				flex: 1;
			}

			image {
				width: 32rpx;
				z-index: 10;
				height: 32rpx;
			}

			input {
				flex: 1;
				margin-left: 15rpx;
				color: #999999;
			}
		}

		.search_btn {
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.showcase_box {
		// background-color: #222222;
		background-color: #f4f4f4;

		.across {
			display: flex;
		}

		.top_box {
			// color: #fff;
			// margin: 0rpx 3vw;
			padding: 20rpx 0;
			width: 700upx;
			height: 180upx;
			background-color: #fff;
			border-radius: 20upx;
			margin: 0 auto;
			position: relative;
			display: flex;
			justify-content: space-around;

			.title {
				font-size: 30rpx;
			}

			.shou {
				margin-top: 15rpx;
				font-size: 24rpx;
			}
		}

		.center_box {
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.center_top {
				border-top-left-radius: 20upx;
				border-top-right-radius: 20upx;
				height: 88rpx;
				padding: 0 3vw;
				width: 100vw;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #999999;
				position: relative;

				.label {
					font-size: 30rpx;
					color: #333333;
				}

				.label_title {
					align-items: center;
				}

				.triangle {
					margin-top: 10rpx;
					width: 0;
					height: 0;
					border-left: 20rpx solid transparent;
					border-right: 20rpx solid transparent;
					border-top: 17rpx solid #666666;
					border-radius: 10rpx;
				}

				.label_box {
					position: absolute;
					top: 88rpx;
					left: 0;
					width: 100vw;
					z-index: 90;
					background: #F5F5F5;
					padding-bottom: 100rpx;

					.uni-list-cell {
						height: 88rpx;
						align-items: center;
						margin-left: 3vw;

						.name {
							font-size: 30rpx;
							color: #333;
							margin-left: 15rpx;
						}
					}
				}
			}

			.content {
				margin: 20rpx 3vw;

				.title {
					// height: 40rpx;
					font-size: 24rpx;
					color: #333333;
					padding: 15rpx 10rpx;
				}

				.coupon {

					display: flex;
					margin-top: 10rpx;
					margin-left: 15rpx;
					width: 200rpx;
					// height: 50rpx;
					border-radius: 5rpx;

					border: solid 1rpx #f9a116;
					justify-content: space-around;
					align-items: center;
					color: #f9a116;

					.label {
						border-right: 1px dotted #f9a116;
					}

					view {
						flex: 1;
						font-size: 24rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
					}
				}

				.ti {
					margin: 10rpx;
					height: 60rpx;
					justify-content: space-between;
					align-items: center;

					.price {
						color: #ff3d3d;
						font-size: 30rpx;
						position: relative;
						margin-left: 20rpx;

						&::after {
							position: absolute;
							content: '¥';
							bottom: 3rpx;
							font-size: 24rpx;
							left: -17rpx;
						}
					}

					view {
						font-size: 30rpx;
						color: #666666;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
